<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <span class="divider"><el-tag>订单购买信息</el-tag></span>
    <!-- 订单信息 -->
    <div class="orderInfo">
      <el-table :data="order.orderItems" style="width: 100%">
        <el-table-column prop="skuTitle" label="商品名称"> </el-table-column>
        <el-table-column prop="skuAttr" label="规格" width="300">
        </el-table-column>
        <el-table-column prop="quantity" label="商品数量" width="120">
        </el-table-column>
        <el-table-column prop="price" label="商品单价" width="120">
          <template slot-scope="{ row }">
            ￥{{ row.price | decimal }}
          </template>
        </el-table-column>
        <el-table-column prop="totalAmount" label="商品总价" width="120">
          <template slot-scope="{ row }">
            ￥{{ row.totalAmount | decimal }}
          </template>
        </el-table-column>
      </el-table>
      <div class="payAmount">
        <span
          >实付款:
          <span class="num">￥{{ order.payAmount | decimal }}</span></span
        >
      </div>
    </div>

    <span class="divider"><el-tag>历史申请记录</el-tag></span>
    <!-- 历史申请记录 -->
    <div class="history">
      <el-table :data="orderRefund.historyList" style="width: 100%">
        <el-table-column prop="applyReason" label="申请原因"> </el-table-column>
        <el-table-column prop="refuseReason" label="拒绝原因" width="300">
        </el-table-column>
        <el-table-column prop="refundStatusName" label="处理进度" width="90">
          <template slot-scope="{ row }">
            <span class="red">{{ row.refundStatusName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间" width="180">
        </el-table-column>
        <el-table-column prop="payAmount" label="实付金额" width="120">
          <template slot-scope="{ row }">
            ￥{{ row.payAmount | decimal }}
          </template>
        </el-table-column>
        <el-table-column prop="refundAmount" label="退款金额" width="120">
          <template slot-scope="{ row }">
            ￥{{ row.refundAmount | decimal }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <span class="divider"><el-tag>当前申请信息</el-tag></span>
    <!-- 当前申请信息 -->
    <div class="current">
      <el-table :data="orderRefund.currentList" style="width: 100%">
        <el-table-column prop="applyReason" label="申请原因"> </el-table-column>
        <el-table-column prop="refundStatusName" label="处理进度" width="90">
          <template slot-scope="{ row }">
            <span class="red">{{ row.refundStatusName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间" width="180">
        </el-table-column>
        <el-table-column prop="payAmount" label="实付金额" width="120">
          <template slot-scope="{ row }">
            ￥{{ row.payAmount | decimal }}
          </template>
        </el-table-column>
        <el-table-column prop="refundAmount" label="退款金额" width="120">
          <template slot-scope="{ row }">
            ￥{{ row.refundAmount | decimal }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 审核意见 -->
    <el-form class="form" :model="form" :rules="rules" ref="ruleForm">
      <el-form-item
        label="拒绝原因"
        prop="reason"
        :label-width="formLabelWidth"
      >
        <el-input
          v-model="form.reason"
          type="textarea"
          :rows="3"
          placeholder="请填写拒绝原因"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="refuseRefund">拒绝</el-button>
      <el-button type="primary" @click="approveRefund" :loading="loading"
        >同意</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import dialogMixins from "@/views/base/dialogMixins";

// 请求接口 start
import orderApi from "@/api/orderApi";
// 请求接口 end

export default {
  // 组件名称 start
  name: "orderRefund",
  // 组件名称 end
  props: ["dialogTitle"],
  mixins: [dialogMixins],
  data() {
    return {
      // 表格数据及校验规则 start
      initForm: {
        reason: "",
      },
      form: {
        reason: "",
      },
      order: {},
      orderRefund: {
        currentList: [],
        historyList: [],
      },
      rules: {},
    };
  },
  methods: {
    // 数据详情 start
    remoteData(row) {
      orderApi.order.infoWithCascade(row.id).then((res) => {
        this.order = res.data;
      });
      orderApi.refund.listForAdmin(row.id).then((res) => {
        this.orderRefund.currentList = res.data.currentList;
        this.orderRefund.historyList = res.data.historyList;
      });
    },
    // 同意
    approveRefund() {
      orderApi.refund
        .approveRefund(
          this.orderRefund.currentList[0].id,
          this.meta.repeatSubmitToken
        )
        .then((res) => {
          this.showDialog(false);
          this.$parent.querySearchForm();
        });
    },
    // 拒绝
    refuseRefund() {
      if (this.form.reason == "") {
        this.$message.error("请填写拒绝原因");
        return;
      }
      orderApi.refund
        .refuseRefund({
          repeatSubmitToken: this.meta.repeatSubmitToken,
          id: this.orderRefund.currentList[0].id,
          reason: this.form.reason,
        })
        .then((res) => {
          this.showDialog(false);
          this.$parent.querySearchForm();
        });
    },
  },
};
</script>

<style lang="less" scoped>
.divider {
  margin-left: 5px;
}
:deep(.el-dialog) {
  padding-bottom: 30px;
  .el-dialog__body {
    padding: 30px 20px 0px 20px;
  }
}
.orderInfo {
  .payAmount {
    margin: 30px 53px 0px 0px;
    display: flex;
    justify-content: flex-end;
    .num {
      color: #fa2c19;
    }
  }
}
.history {
  margin: 20px 0px 30px 0px;
}
.current {
  margin-top: 20px;
}
.form {
  margin-top: 20px;
}
</style>